feat(nav): add about mega-menu and magic-pill navbar motion#304
Merged
Conversation
There was a problem hiding this comment.
Pull request overview
This PR enhances the site navigation by adding an “About” mega-menu (desktop dropdown + mobile accordion) driven from shared data, and introducing a framer-motion “magic pill” hover/active indicator for the desktop navbar.
Changes:
- Added
src/data/nav-menu.tsto centralize About menu data (including node links derived fromsrc/data/organizations.ts). - Added
src/components/nav-about-menu.tsxto render shared About menu content for both desktop (“panel”) and mobile (“accordion”) variants. - Reworked
src/components/navigation.tsxto integrate the About dropdown/accordion behaviors and the magic-pill glider animation, including reduced-motion gating and keyboard/outside-click close handling.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| src/data/nav-menu.ts | Defines About menu data, deriving node links from organizations.ts to avoid drift. |
| src/components/nav-about-menu.tsx | Implements the shared About menu UI for desktop panel and mobile accordion variants. |
| src/components/navigation.tsx | Integrates the About mega-menu + mobile accordion and adds the magic-pill hover/active indicator. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…odes Pull the magic-pill mechanics into a useMagicPill hook and the desktop and mobile disclosures into NavDropdown and NavMobileAccordion, leaving navigation.tsx a lean orchestrator and the pieces reusable on their own. Drop the "Explore" sections column from the About menu so it lists only the five org nodes plus the overview link; the menu data sheds the now-unused section types. Also gate the mobile hamburger morph on reduced-motion for consistency with the rest of the nav.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
src/data/organizations.ts, so it can't drift from the org data./about; a separate chevron<button>toggles the menu — click/keyboard is the canonical path, hover-intent open is a progressive enhancement gated tohover: hoverpointers, with Esc + outside-click close and focus return.Changes
src/data/nav-menu.ts— menu data (nodes derived fromorganizations.ts, 4 fixed sections, overview href).src/components/nav-about-menu.tsx— shared panel/accordion content (panel/accordionvariants).src/components/navigation.tsx— magic-pill glider, desktop About dropdown, mobile About accordion.Accessibility
aria-expanded/aria-controls; Esc closes and restores focus;focus-visible:ring-accenton all interactive elements;aria-current="page"on the active node/section; brand-color dots are decorative (aria-hidden); mobile chevron is a 44px target; fully operable without hover. All motion gated behinduseReducedMotion().Test plan
astro check— 0 errorspnpm build— 184 pages built, Pagefind indexed 183pnpm test:slugs— all validpnpm test:pages— 183/183 pages + 185/185 assets HTTP 200/about; magic pill rests on the active link and glides to the hovered link; two-column grid with no viewport overflow; dark-mode accent legible